<template>
    <div class="right-bottom">
        <div class="warn-info">
            <div class="warn-title"><span class="title-info">告警信息</span></div>
            <div class="warn-content">
                <dv-scroll-board :config="config" style="width:100%;height:180px"/>
            </div>
        </div>
    </div>

</template>
<script setup>
import {wsUrl} from "../utlis/requests"
import { ref,onMounted,onUnmounted,nextTick} from "vue"
let ws=null;
let reconnectTimeout = null; // 重连超时控制

const config=ref({
    header: ['区域', '警告信息','时间'],
    data: [],
    headerBGC:'none',
    oddRowBGC:'none',
    evenRowBGC:'none',
    rowNum:3
})


    // 建立 WebSocket 连接
    const connectWebSocket = () => {
        ws = new WebSocket(wsUrl); // 替换为实际的 WebSocket 服务 URL
        ws.onopen = () => {
            console.log("WebSocket 连接已建立");
        };

        ws.onmessage = (event) => {
            //console.log('eee',event.data)
            if(event.data!='Connected'){
                let result=JSON.parse(event.data)
                let arr=[]
                if(result.type=='alarmInfo'){
                    let res=result.content;
                    res.map((item,index)=>{
                        let list=[item.workshop,item.ename,item.edate]
                        arr.push(list)
                    })
                    nextTick(()=>{
                        config.value.data = arr
                    })
                    
                }
            }
        };
        ws.onerror = (error) => {
            console.error("WebSocket 发生错误", error);
        };

        ws.onclose = (event) => {
        console.log("WebSocket 连接已关闭", event.code);
        handleReconnect(); // WebSocket 连接关闭时尝试重连
        };
    };

// 处理 WebSocket 连接断开后的重连
const handleReconnect = () => {
    // 如果已经在重连，避免重复重连
    if (reconnectTimeout) {
    return;
    }

    reconnectTimeout = setTimeout(() => {
    console.log("正在尝试重新连接 WebSocket...");
    connectWebSocket();
    reconnectTimeout = null; // 重连后清除重连超时
    }, 5000); // 5 秒后重连
};

onMounted(()=>{
    //console.log('dd',config.data[0][1])
    connectWebSocket(); // 组件加载时连接 WebSocket
})

onUnmounted(() => {
    if (ws) {
        ws.close();
    }
});

</script>

<style scoped lang="less">
.right-bottom{
    height:250px;
    width:548px;
    background: url('../components/img/right-bottom.png') no-repeat;
    background-size: 100% 100%;
    margin-bottom:20px;
    transform: matrix(1, 0, 0, 1, 1, 0);
    transition-duration: 0ms;
}
.warn-info{
    padding:15px 20px;
    display:flex;
    flex-direction:column;
    height:100%;
    .warn-title{
        color:#fff;
        background: url('../components/img/title-bg.png') no-repeat;
        background-size: 100% 100%;
        height:36px;
        line-height:36px;
        .title-info{
            margin-left:40px;
        }
    }
}
:deep(.header){
    height:36px;
    line-height:36px;
    font-weight:700;
    font-size:22px;
    background:-webkit-linear-gradient(bottom,#fff,#5eadff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    text-fill-color:transparent;
    
}
:deep(.dv-scroll-board .rows .row-item){
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to left, #003eff, rgba(42, 89, 204, 0.51)) 1; /* 渐变作为边框 */
    border-image-slice: 1; /* 边框厚度 */
}
</style>